Estoy diseñando una extensión de Google Chrome. Mi objetivo es tener una imagen insertada en el cuerpo del sitio web que el usuario está mirando. Cuando lo pruebo, recibo dos errores: "Error en el registro del servicio trabajado" y "Error de referencia no detectada: el documento no está definido".

Intenté usar un sistema de prueba y captura, un contenedor de JavaScript diferente, ajustando los "permisos" y "permisos de host", agregando "minimum_chrome_version", agregando "web_accessible_resources" y más. Nada ha funcionado hasta ahora. Aquí está mi código:

manifiesto.json:

 { "name": "blah", "description": "blah", "version": "1.0", "manifest_version": 3, "icons": { "16": "icon.png", "32": "icon.png", "48": "icon.png", "128": "icon.png" }, "action": { "default_popup": "popup.html" }, "minimum_chrome_version": "93", "background": { "service_worker": "background.js" }, "content_scripts": [{ "matches": ["<all_urls>"], "js": ["background.js"], "css":["popup.css"] }], "permissions": [ "storage", "activeTab", "scripting" ], "host_permissions": [ "<all_urls>" ], "web_accessible_resources": [ { "resources": ["ezgif-3-9576363471.gif"], "matches": ["<all_urls>"] } ] }

fondo.js:

 const img = document.createElement("img"); img.src = chrome.runtime.getURL("ezgif-3-9576363471.gif"); document.body.append(img);

fondo-envoltura.js:

 try { importScripts("background.js"); } catch (e) { console.error(e); }

Para resumir, estoy tratando de descubrir cómo dejar que se defina el documento y cómo usar correctamente el trabajador de servicio. ¡Gracias por adelantado!